<template>
    <!-- 工作人员列表 -->
    <div class="right-bottom-box">
        <group-card
            :title="title"
            type="right"
            :useSearch="useSearch"
            :placeholder="placeholder"
            v-model:searchVal="newSearchVal"
            @triggerSearch="hanldeSearch">
            <el-row :gutter="24">
                <el-col
                    v-for="item in workerDataList"
                    :key="item.id"
                    :span="12"
                    class="personInfo">
                    <div class="leftImg">
                        <img
                            :src="item.avatar || item.cardImg"
                            :alt="item.name" />
                    </div>
                    <div class="rightInfo">
                        <div>
                            <span class="label">姓名：</span>
                            <span
                                class="value name-text"
                                v-html="item.name"></span>
                        </div>

                        <div><span class="label">部门/岗位：</span> {{ item.twoLevel }}</div>

                        <div><span class="label">人员证件类型：</span> {{ item.oneLevel }}</div>
                        <div><span class="label">通行点位</span> {{ item.remark }}</div>

                        <div style="font-size: 10px;">
                            <span class="label">当前通行时间：</span>
                            <span class="value ftSize">
                                {{ item.regTime }}
                            </span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </group-card>
    </div>
</template>

<script setup name="wokerList">
const props = defineProps({
  workerDataList: {
    type: Array,
    default: () => [],
  },
  title: {
    type: String,
  },

  useSearch: {
    type: Boolean,
    default: false,
  },
  placeholder: String,
  searchVal: String
});

console.log(props.workerDataList,'props.workerDataList');

const emits = defineEmits(['triggerSearch', 'update:searchVal'])

const newSearchVal = computed({
  get() {
    return props.searchVal
  },
  set(val) {
    emits('update:searchVal', val)
  }
})

const hanldeSearch = () => {
  emits('triggerSearch')
}
</script>

<style lang="scss" scoped>
.right-bottom-box {
  margin-top: 30px;
  height: 265px;
  display: flex;
  flex-direction: column;
  .el-row {
    padding: 14px 0 0 10px;
  }
  .personInfo {
    margin-bottom: 22px;
    display: flex;
    // justify-content: space-between;
    .leftImg {
      width: 64px;
      height: 82px;
      margin-right: 5px;
      flex-shrink: 0;
      position: relative;
      img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .rightInfo {
      padding: 0px 0 2px 0px;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      div {
        display: flex;
        white-space: nowrap;
        align-items: center;
        font-size: 12px;
        .label {
          flex-shrink: 0;
        }
        .name-text {
          max-width: 74px;
          text-overflow: ellipsis;
          overflow: hidden;
          color: #fff;
          flex: 1;
        }
      }
      span {
        color: rgba(255, 255, 255, 0.6);
      }

      .right-info-status {
        display: inline-block;
        font-size: 12px;
        border-radius: 9px;
        margin-left: 7px;
        color: rgba(0, 127, 255, 1);
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 0 6px;
      }
      .ftSize {
        font-size: 10px;
      }
    }
  }
}
</style>
